A basic example of AJAX (getting a number)

This is a basic example of using AJAX to request the data from the server to fetch a number. The window.onload function initiates the AJAX request and then the callback function - drawGraph() - takes the response and creates the chart.

Note: In October 2013 a new CSV reader was added to RGraph. It makes reading CSV files much easier. You can read about the new CSV reader here.

This goes in the documents header:

<script src="RGraph.common.core.js"></script>
<script src="RGraph.common.effects.js"></script>
<script src="RGraph.vprogress.js"></script>

Put this where you want the chart to show up:

<canvas id="cvs" width="600" height="250">[No canvas support]</canvas>
<button onclick="window.onload()">Refresh data</button>

This is the code that generates the chart:

<script>
    /**
    * Ths window.onload function initiates the AJAX request. The AJAX page is: http://www.rgraph.net/getdata.html
    * If you view this in your browser you'll see that all it does is output a sequence of numbers.
    */
    window.onload = function ()
    {
        RGraph.AJAX.getNumber('/getdata.html', function (num)
        {
            drawGraph(num);
        });
    };



    /**
    * This is the AJAX callback function. It splits up the response, converts it to numbers and then creates the chart.
    */
    function drawGraph (num)
    {
        // The num variable is the output of the AJAX request
        var data = num;

        // Draw the progress bar
        // A global on purpose
        if (typeof progress === 'undefined') {
            progress = new RGraph.VProgress({
                id: 'cvs',
                min: 0,
                max: 100,
                value: num,
                options: {
                    `textAccessible: true,
                    margin: 10,
                    gutterRight: 35
                }
            })
            
        } else {
        
            progress.value = num;
        }

        progress.grow();
    }
</script>